<template>
  <el-row class="tac">
  <el-col :span="12">
    <!-- <h5>默认颜色</h5> -->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{msg}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="openRead">看博客</el-menu-item>
          <el-menu-item index="1-2" @click="openWrite">写博客</el-menu-item>
          <el-menu-item index="1-3" @click="openUser">个人中心</el-menu-item>
        </el-menu-item-group>
       
      </el-submenu>
    </el-menu>
  </el-col>
  </el-row>
</template>

<script>
export default {
data(){
  return {
    msg:'博客'
  }
},

methods:{
    handleOpen(){
       this.msg = '主页'
      //  console.log(this.$route);
       
    },
    handleClose(){
      this.msg = '博客'
      
        this.$router.push({name:'Main'})
      
     
    },
    openRead(){
            this.$router.push({name:'Read'})
    },
     openWrite()
     {
            this.$router.push({name:'Write'})
    },
    openUser(){
      this.$router.push({name:'Author'})
    },
    
}
}
</script>

<style lang="less" scoped>



</style>